(function() {
    var num=[];
    var experience=[];
    $.ajax({
        url:"http://localhost:8080/job/countExperience",
        type:"get",
        async:false,
        success:function(value){
            console.log(value);
            for (var i = 0; i < value.length; i++) {
                num.push(value[i].num)
                experience.push(value[i].experience)
            }
        },
        error:function(){
            alert("出错啦")
        }

    })

    //左一
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.l1'));
    // 指定图表的配置项和数据
    option = {
        // 标题
        title: {
            text: '工作经验要求',
            textStyle: {
                color: "#fff",
            },
        },
        // 提示框组件。
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        //x轴相关设置
        xAxis: {
            type: 'category',
            // data: ['经验不限', '1-3年', '3-5年', '5-10年', '10年以上'],
            data:experience,
            axisLabel: {
                color: "rgb(185,184,206)"
            }
        },
        //  y轴相关设置
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "rgb(185,184,206)"
            },
            //修改背景线条样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(72,71,83)"
                }
            }
        },
        series: [{
            // data: [358, 426, 876, 523, 70],
            data:num,
            type: 'bar',
            //柱子宽度
            barWidth: '50%'
        }],
        //颜色
        color: ['rgb(51,152,219)'],
        //网格配置
        grid: {
            //配合left right top bottom 设置图表的大小
            left: '3%',
            right: '8%',
            bottom: '5%',
            //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
            containLabel: true
        },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    window.addEventListener("resize", function() {
        myChart.resize()
    })

})();


(function() {
    //左二
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.l2'));
    var num = [];
    var ed = [];
    $.ajax({
        url: "http://localhost:8080/job/countEducation",
        type: "get",
        async: false,
        success: function (value) {
            console.log("接口返回数据:", value);
            value.forEach(function (item) {
                num.push(item.num);
                ed.push(item.education);
            });
            // 动态生成饼图数据
            var chartData = [];
            for (var i = 0; i < num.length; i++) {
                chartData.push({
                    value: num[i],
                    name: ed[i]
                });
            }
            // 指定图表的配置项和数据
            var option = {
                // 标题
                title: {
                    text: '学历要求',
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    data: chartData,
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }],
                //颜色
                color: ['rgb(73,146,255)', 'rgb(136,255,195)', 'rgb(253,221,96)', 'rgb(255,110,118)'],
                legend: {
                    top: '5%',
                    textStyle: {
                        color: 'rgb(172,171,194)'
                    }
                }
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        error: function () {
            alert("出错啦");
        }
    });

    window.addEventListener("resize", function () {
        myChart.resize()
    })

})();

(function() {
    //右一
    // 基于准备好的dom，初始化echarts实例
    // 指定图表的配置项和数据
    var myChart = echarts.init(document.querySelector('.r1'));
    var city=[];
    var sala=[];
    $.ajax({
        url:"http://localhost:8080/job/countSalary",
        type:"get",
        async:false,
        success:function(value){
            console.log(value);
            for (var i = 0; i < value.length; i++) {
                city.push(value[i].city)
                sala.push(value[i].avg_salary)
            }
        },
        error:function(){
            alert("出错啦")
        }

    })

    option = {
        // 标题
        title: {
            text: '平均薪资最多的前五名城市',
            textStyle: {
                color: "#fff",
            },
        },
        xAxis: {
            type: 'category',
            // data: ['上海', '北京', '深圳', '广州', '杭州'],
            data:city,
            axisLabel: {
                color: "rgb(175,174,197)"
            }
        },
        yAxis: {
            type: 'value',
            //修改坐标轴
            axisLabel: {
                color: "rgb(175,174,197)"
            },
            //修改背景线条样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(72,71,83)"
                }
            }
        },
        //网格配置
        grid: {
            //配合left right top bottom 设置图表的大小
            left: '3%',
            right: '8%',
            bottom: '5%',
            //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
            containLabel: true
        },
        // 提示框组件。
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        series: [{
            // data: [33468, 27907, 31490, 48702, 31943],
            data:sala,
            type: 'line',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'blue' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'transparent' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    window.addEventListener("resize", function() {
        myChart.resize()
    })

})();


(function() {
    //右二
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.r2'));
    var month=[];
    var re=[];
    $.ajax({
        url:"http://localhost:8080/job/countRequirement",
        type:"get",
        async:false,
        success:function(value){
            console.log(value);
            for (var i = 0; i < value.length; i++) {
                month.push(value[i].month)
                re.push(value[i].requirement)
            }
        },
        error:function(){
            alert("出错啦")
        }

    })
    // 指定图表的配置项和数据
    option = {
        // 标题
        title: {
            text: '2024最近半年岗位需求变化',
            textStyle: {
                color: "#fff",
            },
        },
        xAxis: {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            data:month,
            axisLabel: {
                color: "rgb(175,174,197)"
            }
        },
        yAxis: {
            type: 'value',
            //修改坐标轴
            axisLabel: {
                color: "rgb(175,174,197)"
            },
            //修改背景线条样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(72,71,83)"
                }
            },
            //是否显示坐标轴轴线
            axisLine: {
                show: true
            }
        },
        series: [{
            // data: [820, 232, 901, 934, 1290, 1330, 720],
            data:re,
            type: 'line',
            smooth: true
        }],
        //网格配置
        grid: {
            //配合left right top bottom 设置图表的大小
            left: '3%',
            right: '8%',
            bottom: '5%',
            //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
            containLabel: true
        },
        // 提示框组件。
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    window.addEventListener("resize", function() {
        myChart.resize()
    })

})();

(function () {
    //地图
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.bottom'));
    $.ajax({
        url: "http://localhost:8080/job/countWorld",
        type: "get",
        async: false,
        success: function (value) {
            console.log("接口返回数据:", value);
            var city = [];
            var num = [];
            value.forEach(function (item) {
                num.push(item.num);
                city.push(item.city);
            });
            // 动态生成地图数据
            var chartData = [];
            for (var i = 0; i < num.length; i++) {
                chartData.push({
                    value: num[i],
                    name: city[i]
                });
            }
            // 指定图表的配置项和数据
            var option = {
                //标题样式
                title: {
                    text: "全国岗位分布图",
                    textStyle: {
                        color: 'rgb(255,215,0)',
                    },
                    left: 'center',
                    top: '18%'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: { // 左侧小导航图标
                    show: true,
                    x: 'left',
                    y: 'bottom',
                    textStyle: {
                        fontSize: 9,
                        color: 'rgb(185,184,206)'
                    },
                    splitList: [
                        {
                            start: 1,
                            end: 9
                        },
                        {
                            start: 10,
                            end: 99
                        },
                        {
                            start: 100,
                            end: 999
                        },
                        {
                            start: 1000,
                            end: 9999
                        },
                        {
                            start: 10000
                        }
                    ],
                    color: ['#334271', '#4d619d', '#6e8adf', '#94d7f1', '#cdeaf6']
                },
                series: [{
                    name: '岗位人数',
                    type: 'map',
                    mapType: 'china',
                    roam: false, // 禁用拖动和缩放
                    itemStyle: { // 图形样式
                        normal: {
                            borderWidth: .5, //区域边框宽度
                            borderColor: '#009fe8', //区域边框颜色
                            areaColor: "#ffefd5", //区域颜色
                        },
                        emphasis: { // 鼠标滑过地图高亮的相关设置
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#fff",
                        }
                    },
                    label: { // 图形上的文本标签
                        normal: {
                            show: true, //省份名称
                            fontSize: 8,
                        },
                        emphasis: { // 鼠标滑过地图高亮的相关设置
                            show: true,
                            fontSize: 8,
                        }
                    },
                    data: chartData
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        error: function () {
            alert("出错啦");
        }
    });
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();
